<template>
  <div class>
    <el-table
      :data="state.tableData"
      style="width: 100%;margin-bottom:30px"
      header-cell-class-name="eltablebg"
      v-loading="state.loading"
    >
      <el-table-column
        prop="created_at"
        :label="$t('assets.time')"
      ></el-table-column>
      <el-table-column prop="recharge_status" :label="$t('assets.status')">
        <template v-slot="r">
          <span>
            {{ r.row.memo }}
            <!-- {{
              r.row.recharge_status === 1
                ? $t("assets.comfrimning")
                : r.row.recharge_status === 2
                ? $t("assets.success")
                : $t("assets.fail")
            }} -->
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="recharge_status" :label="$t('assets.currency')">
        <template v-slot="r">
          <span>
            {{ r.row.currency.code }}
            <!-- {{
              r.row.recharge_status === 1
                ? $t("assets.comfrimning")
                : r.row.recharge_status === 2
                ? $t("assets.success")
                : $t("assets.fail")
            }} -->
          </span>
        </template>
      </el-table-column>
      <!-- <el-table-column
        prop="currency_name"
        :label="$t('assets.currency')"
      ></el-table-column> -->
      <el-table-column
        v-if="value"
        prop="value"
        :label="$t('recharge.hashAddress')"
      ></el-table-column>
      <el-table-column prop="value" :label="$t('assets.amount')">
        <template #default="r">
          {{ $currency(r.row.value) }}</template
        >
      </el-table-column>
      <!-- <el-table-column
        prop="address"
        :label="$t('assets.detail')"
      ></el-table-column> -->
      <template #empty>
        <Norecord />
      </template>
    </el-table>
    <Pagination
      :total="state.total"
      :size="state.listParam.limit"
      :current="state.curentPage"
      @currentchange="currentchange"
    />
  </div>
</template>

<script>
import { reactive, onMounted } from "vue";
import Norecord from "@/components/noRecord/NoRecord.vue";
import { userRecordRecharge } from "@/api/assets";
import Pagination from "@/components/pagination/index.vue";
import UseSystemSetting from "@/commonapi/useSystemSetting";

export default {
  name: "RecordRecharge",
  components: { Norecord, Pagination },
  setup() {
    const state = reactive({
      tableData: [],
      loading: false,
      total: 0,
      curentPage: 1,
      listParam: {
        // currency_id:0,
        page: 1,
        limit: 20,
      },
    });
    /**
     * methods
     */
    onMounted(() => {
      gettableData();
    });
    // 获取开关状态
    const { recharge_manual_hash } = UseSystemSetting();
    // 获取充值列表
    const gettableData = () => {
      state.loading = true;
      userRecordRecharge(state.listParam)
        .then((res) => {
          state.loading = false;
          state.tableData = res.data.data;
          state.total = res.data.total;
        })
        .catch(() => {
          state.loading = false;
        });
    };
    // 分页
    const currentchange = (val) => {
      state.listParam.page = val;
      gettableData();
    };
    return {
      state,
      gettableData,
      currentchange,
      recharge_manual_hash,
    };
  },
};
</script>

<style scoped lang="less">
.jump {
  width: 44px;
  height: 20px;
  line-height: 20px;
  margin-inline-start: 10px;
}
.page {
  width: 20px;
  height: 20px;
}
</style>
